//三级联动数据和tabs初始化数据
var arr = [
    {
        "school": "第一小学",
        "class": [
            {
                "grade": "一年级",
                "classes": ["1001班", "1002班", "1003班", "1004班", "1005班", "1006班", "1007班"]
            },
            {
                "grade": "二年级",
                "classes": ["2001班", "2002班", "2003班", "2004班"]
            }
        ]
    }, {
        "school": "第二小学",
        "class": [
            {
                "grade": "一年级",
                "classes": ["1001班", "1002班", "1003班", "1004班", "1005班", "1006班", "1007班"]
            },
            {
                "grade": "二年级",
                "classes": ["2001班", "2002班", "2003班", "2004班"]
            }
        ]
    }
]
//页面加载执行
$(function () {
    Linkage()//页面加载执行三级联动
    showlist()//添加数据
    $("#add").click(function () {
        var school = $("#school").val()
        if (!school) {
            alert("请选择学校")
            return
        }
        var grade = $("#grade").val()
        if (!grade) {
            alert("请选择年级")
            return
        }
        var classes = $("#classes").val()
        if (!grade) {
            alert("请选择班级")
            return
        }
        var name = $("#surname").val()
        if (!surname) {
            alert("请填写姓名")
            return
        }
        var chinese = $("#chinese").val()
        if (!chinese) {
            alert("请填写语文成绩")
            return
        }
        var maths = $("#maths").val()
        if (!maths) {
            alert("请填写数学成绩")
            return
        }
        var english = $("#english").val()
        if (!english) {
            alert("请填写英语成绩")
            return
        }
        var obj = {
            // school:$("#school option:checked").html(),
            classname: $("#grade option:checked").html() + "" + $("#classes option:checked").html(),
            name: name,
            chinese: chinese,
            maths: maths,
            english: english,
            total: +chinese + +maths + +english,
            average: ((+chinese + +maths + +english) / 3).toFixed()
        }
        fun(school, obj)
        showlist(school)
    })


    //绑定排序点击事件
    $(".sortbtn").click(function () {
        var type = $(this).attr("val")
        $("li").each(function (i) {
            if ($(this).hasClass("bgcolor")) {
                showlist(i, type)
            }
        })
    })
})
//添加本地数据
function fun(school, obj) {
    if (!localStorage.getItem('data')) {
        var arr = [[],[]]
        arr[school].push(obj)
        localStorage.setItem('data', JSON.stringify(arr))

    } else {
        var arr = JSON.parse(localStorage.getItem('data'))
        console.log(arr)
        arr[school].push(obj)
        localStorage.setItem('data', JSON.stringify(arr))
    }
}
//显示列表  school参述下标
function showlist(school = 0, sort = 'z') {
    //显示tabs标签 参数默认选中项
    showTabs(school)
    $("li").css({ "background": "#fff" })
    $("li").eq(school).css({ "background": "red" })
    //绑定点击事件
    $("li").click(function () {
        showlist($(this).index())
    })
    //检查和获取要显示的数据
    var data = JSON.parse(localStorage.getItem('data'))
    if (!data) {
        $("#con" + school).html("暂无数据")
        return
    }
    //console.log(data)
    var list = data[school]//学生列表
    var tad = ""
    list = fzsort(list, sort)
    for (let i in list) {
        tad += `<tr>
            <td>${list[i].classname}</td>
            <td>${list[i].name}</td>
            <td>${list[i].chinese}</td>
            <td>${list[i].maths}</td>
            <td>${list[i].english}</td>
            <td>${list[i].total}</td>
            <td>${list[i].average}</td>
            <td>${Number(i) + 1}</td>
            </tr>`
    }
    $("#tab").html(tad)
}
//显示标签页
function showTabs(index) {
    var str = ""
    for (i in arr) {
        str += `<li>${arr[i].school}</li>`
    }
    $("#tabul").html(str)
    $("#tabul li").eq(index).addClass("bgcolor")
}

//封装排序
function fzsort(list, type) {
    console.log(123)
    switch (type) {
        case "c":
            list.sort(function (a, b) {
                return b.chinese - a.chinese
            })
            break;
        case "m":
            list.sort(function (a, b) {
                return b.maths - a.maths
            })
            break;
        case "e":
            list.sort(function (a, b) {
                return b.english - a.english
            })
            break;
        default:
            list.sort(function (a, b) {
                return b.total - a.total
            })
            break;
    }
    return list

}

//封装三件联动
function Linkage() {
    //获取学校
    var html = ""
    for (i in arr) {
        html += `<option value="${i}">${arr[i].school}</option>`
    }
    $("#school").append(html)
    //获取年级
    $("#school").change(function () {
        $("#grade option:gt(0)").remove()
        var grade = arr[$(this).val()].class
        console.log(grade)
        var html = ""
        for (i in grade) {
            html += `<option value="${$(this).val()}-${i}">${grade[i].grade}</option>`
        }
        $("#grade").append(html)
    })
    //获取班级
    $("#grade").change(function () {
        $("#classes option:gt(0)").remove()
        console.log($(this))
        var classes = $(this).val().split("-")
        var cls = arr[classes[0]].class[classes[1]].classes
        var html = ""
        for (i in cls) {
            html += `<option value="">${cls[i]}</option>`
        }
        $("#classes").append(html)
    })
}